<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="flex" style="justify-content: space-around">
              <div>用户总数</div>
              <div>2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="flex" style="justify-content: space-around">
              <div>歌曲总数</div>
              <div>2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="flex" style="justify-content: space-around">
              <div>歌手数量</div>
              <div>2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="flex" style="justify-content: space-around">
              <div>歌单数量</div>
              <div>2</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="background" shadow="hover">
            <!-- 头像 -->
            <el-upload
              class="avatar-uploader"
              action="/common/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <x-avatar v-if="imageUrl" :src="imageUrl" :config="{ fit: 'cover', size: 80, border: true }" />
              <x-avatar v-else :config="{ fit: 'cover', size: 80, border: true }" :src="circleUrl" />
            </el-upload>
            <!-- 信息 -->
            <div class="flex">
              <div class="label">姓名：</div>
              <div class="name">{{ userInfo.userName }}</div>
            </div>
            <div class="flex">
              <div class="label">电话：</div>
              <div class="name">{{ userInfo.userPhone || '暂无' }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import * as axiosApi from './api'

export default {
  name: 'Dashboard',
  data() {
    return {
      imageUrl: this.$store.state.user.userInfo.img_url,
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    ...mapGetters(['name']),
    ...mapState('user', ['userInfo'])
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      axiosApi
        .updateAvatar({
          userNo: this.userInfo._id,
          img_url: res.data.filePath
        })
        .then(res => {
          this.$store.commit('user/SET_INFO', res.data)
        })
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
      if (!isJPG) {
        this.$message({
          message: '上传头像图片是 PNG JPEG JPG 格式!',
          type: 'error'
        })
      }

      return isJPG
    }
  }
}
</script>

<style lang="scss" scoped>
.background {
  background-image: linear-gradient(
    to left bottom,
    #d16ba5,
    #c777b9,
    #ba83ca,
    #aa8fd8,
    #9a9ae1,
    #8aa7ec,
    #79b3f4,
    #69bff8,
    #52cffe,
    #41dfff,
    #46eefa,
    #5ffbf1
  );
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.flex {
  display: flex;
  .label {
    width: 80px;
    font-size: 20px;
    font-weight: bold;
    text-align-last: justify;
  }
  .name {
    font-size: 18px;
  }
}
</style>
